<template>
  <div class="wrap">
    <div class="title_box">
      <span class="title_span">用户日志</span>
      <span class="userName_span">{{ usersStore.$state.userInfo.userName }}</span>
    </div>
    <a-card class="tab_card">
      <div class="search_tiem">
        <span class="title">选择日期</span>
        <a-range-picker
          style="width: 360px; margin: 0 0px 24px 0"
          format="YYYY-MM-DD"
          v-model="searchTime"
          @change="searchTimeChange"
        />
        <a-divider direction="vertical" />
        <a-button type="primary" @click="searchUserLogClick">
          <template #icon>
            <icon-search />
          </template>
          查询
        </a-button>
        <a-button type="primary" style="margin-left: 10px" status="danger" @click="resetSearchClick">
          <template #icon>
            <icon-refresh />
          </template>
          重置
        </a-button>
      </div>
      <a-table
        :style="{ width: '1040px' }"
        :data="userLogList"
        :columns="userLogTableColumns"
        :bordered="false"
        :pagination="{ total: total, current: getUserLogListpParam.page }"
        @page-change="pageChange"
      >
        <template #index="{ rowIndex }">
          {{ (getUserLogListpParam.page - 1) * 10 + (rowIndex + 1) }}
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'UserLog'
})
</script>
<script lang="ts" setup>
// 引入
import { Message } from '@arco-design/web-vue'
import { getUserLogListApi } from '@/apis/users/index.ts'
import { useUsersStore } from '@/store'
const usersStore = useUsersStore()
// 请求用户日志携带的参数对象
const getUserLogListpParam = ref({
  userId: usersStore.$state.userInfo.userId,
  page: 1,
  size: 10,
  startTime: '',
  endTime: ''
})

const searchTime = ref([])

// 数据总条数
const total = ref(100)

// 用户日志的数据列表
const userLogList = ref([])

// 重置查询的点击事件
const resetSearchClick = () => {
  getUserLogListpParam.value.page = 1
  getUserLogListpParam.value.startTime = ''
  getUserLogListpParam.value.endTime = ''
  getUserLogListFunc()
    .then(() => {
      Message.success('重置成功')
    })
    .catch(() => {
      Message.success('重置失败')
    })
}

// 查询按钮的点击事件
const searchUserLogClick = () => {
  getUserLogListpParam.value.page = 1
  getUserLogListFunc()
    .then(() => {
      Message.success('查询成功')
    })
    .catch(() => {
      Message.success('查询失败')
    })
}

// 选择时间的change事件
const searchTimeChange = () => {
  getUserLogListpParam.value.startTime = searchTime.value[0] + ' 00:00:00'
  getUserLogListpParam.value.endTime = searchTime.value[1] + ' 23:59:59'
}

// 当前页变化的时候的change事件
const pageChange = (e: any) => {
  getUserLogListpParam.value.page = e
  getUserLogListFunc()
    .then(() => {
      // Message.success('加载成功')
    })
    .catch(() => {
      // Message.success('加载失败')
    })
}

// 获取用户日志数据的函数
const getUserLogListFunc = async () => {
  const res = await getUserLogListApi(getUserLogListpParam.value)
  console.log(res)
  userLogList.value = res.data.list
  total.value = res.data.total
}

// 用户日志数据表格的字段规则
const userLogTableColumns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index',
    align: 'center',
    width: 80
  },
  {
    title: '日志内容',
    dataIndex: 'userLogContent',
    slotName: 'userLogContent',
    align: 'center',
    width: 400
  },
  {
    title: '记录时间',
    dataIndex: 'createTime',
    slotName: 'createTime',
    align: 'center',
    width: 250
  }
])

// 初始化
onMounted(() => {
  getUserLogListFunc()
    .then(() => {
      // Message.success('加载成功')
    })
    .catch(() => {
      // Message.success('加载失败')
    })
  console.log(usersStore.$state.userInfo)
})
</script>

<style scoped>
.wrap {
  padding: 14px;
}
.title_box {
  margin-bottom: 10px;
}
.title_box .title_span {
  font-size: 20px;
  font-family: '黑体';
  font-weight: bold;
}
.title_box .userName_span {
  margin-left: 10px;
  font-size: 18px;
  font-family: '微软雅黑';
  font-weight: bold;
}
.tab_card {
  height: 780px;
}
.search_tiem .title {
  margin-right: 10px;
  font-size: 18px;
  font-weight: bold;
}
</style>
